<template>
	<view class="appointment">
		<view class="banner">
			<image src="https://cloudcdn.noitom.com.cn/noitom2/billiard/app_banner.png"></image>
		</view>

		<view class="storeName">
			<image src="https://cloudcdn.noitom.com.cn/noitom2/billiard/locationIcon.png"></image>
			<text>{{shopDetail.name}}</text>
		</view>
		<view class="tabs">
			<view :class="tabActive == 0 ? 'tabActive tab' : 'tab'" @click="changeTab(0)">团体课</view>
			<view :class="tabActive == 1 ? 'tabActive tab' : 'tab'" @click="changeTab(1)">私教课</view>
		</view>

		<view class="tabCont" v-if="tabActive == 0">
			<view class="league">
				<view class="weekBox">
					<view v-for="(item,i) in shopDetail.leagueList" :key="i"
						:class="activeDay == i ? 'cont active' : 'cont'" @click="changeDay(i)">
						<view class="weedDay">{{i == 0 ? '今天' : item.weekDay}}</view>
						<view class="day">{{item.day}}</view>
					</view>
				</view>

				<view class="activeData">
					<view v-for="(item,i) in activeData.list" :key="i" class="cont">
						<view class="top">
							<view class="course_title">{{item.courseTitle}}</view>
							<view class="num"><text>{{item.cnum}}</text> / {{item.tnum}}人</view>
						</view>
						<view class="label">
							<text v-for="(lItem,lI) in item.label" :key="lI">{{lItem}}</text>
						</view>
						<view class="down">
							<image :src="item.imgUrl" class="imgUrl"></image>
							<text class="coach_name">{{item.coachName}}</text>
							<text class="line"></text>
							<text class="time">{{item.time}}</text>
							<button :disabled="item.status != 0"
								@click="toLeagueDetail(item.id)">{{item.status == 0 ? '预约' : '已预约'}}</button>
						</view>
					</view>
					<view v-if="activeData.list.length <= 0" class="nodata">
						<image src="https://cloudcdn.noitom.com.cn/noitom2/billiard/noCoach.png"></image>
						<view class="des">今天没有课程～</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tabCont" v-else>

			<view class="coach">
				<view v-for="(item,i) in shopDetail.coachList" :key="i" class="cont" @click="toCoachDetail(item.cid)">

					<image :src="item.imgUrl" class="coach_r_icon"></image>
					<view class="right">
						<view class="head">
							<view class="headPic" v-if="item.recommend == 1">店长推荐</view>
							<view class="name">{{item.name}}</view>
						</view>
						<view class="level">{{item.level}}教练</view>
						<view class="price"><text class="symbol"></text><text class="num">{{item.price}}</text>/节起
						</view>
					</view>
				</view>
			</view>

		</view>



		<image src="https://cloudcdn.noitom.com.cn/noitom2/billiard/footer_pic.png" class="footer_pic"></image>
	</view>
</template>

<script>
	import {
		getStore
	} from "@/api/getData.js";
	export default {
		data() {
			return {
				currentDate:null,
				//店铺详情数据
				shopDetail: {
					//储值列表，取前三条数据
					recommendList: [{
							rId: 0,
							recharge_amount: 100,
							presented: 5,
							recommend: 0
						},
						{
							rId: 1,
							recharge_amount: 300,
							presented: 20,
							recommend: 1
						},
						{
							rId: 2,
							recharge_amount: 500,
							presented: 50,
							recommend: 0
						}
					],
					//私教列表，返回当前店铺所有私教
					coachList: [{
							cId: 0,
							imgUrl: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/myIcon_h.png',
							name: '王教练',
							level: 1,
							price: 120,
							recommend: 1
						},
						{
							cId: 1,
							imgUrl: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/myIcon_h.png',
							name: '王教练',
							level: 2,
							price: 220,
							recommend: 0
						},
						{
							cId: 2,
							imgUrl: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/myIcon_h.png',
							name: '王教练',
							level: 3,
							price: 320,
							recommend: 1
						},
						{
							cId: 3,
							imgUrl: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/myIcon_h.png',
							name: '王教练',
							level: 1,
							price: 120,
							recommend: 0
						}
					],
					//团课列表，取当前店铺的（当前日-当前日+6）团课列表
					leagueList: [{
							day: 21,
							weekDay: '三',
							list: [{
								lId: '0',
								course_title: '10人小班基础指导10人小班基...',
								cNum: 5,
								tNum: 10,
								label: ['基础课', '进阶课'],
								imgUrl: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/myIcon_h.png',
								coach_name: '王教练',
								time: '17:00-17:20',
								status: 0 //0-未预约，1-已预约
							}, {
								lId: '0',
								course_title: '10人小班基础指导10人小班基...',
								cNum: 5,
								tNum: 10,
								label: ['基础课', '进阶课'],
								imgUrl: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/myIcon_h.png',
								coach_name: '王教练',
								time: '17:00-17:20',
								status: 1 //0-未预约，1-已预约
							}]
						},
						{
							day: 22,
							weekDay: '四',
							list: [{
								lId: '0',
								course_title: '1000人小班基础指导10人小班基...',
								cNum: 5,
								tNum: 10,
								label: ['基础课', '进阶课'],
								imgUrl: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/myIcon_h.png',
								coach_name: '王教练',
								time: '17:00-17:20',
								status: 0 //0-未预约，1-已预约
							}]
						},
						{
							day: 23,
							weekDay: '五',
							list: []
						},
						{
							day: 24,
							weekDay: '六',
							list: [{
								lId: '0',
								course_title: '20人小班基础指导10人小班基...',
								cNum: 5,
								tNum: 10,
								label: ['基础课', '进阶课'],
								imgUrl: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/myIcon_h.png',
								coach_name: '王教练',
								time: '17:00-17:20',
								status: 0 //0-未预约，1-已预约
							}]
						},
						{
							day: 25,
							weekDay: '日',
							list: [{
								lId: '0',
								course_title: '30人小班基础指导10人小班基...',
								cNum: 5,
								tNum: 10,
								label: ['基础课', '进阶课'],
								imgUrl: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/myIcon_h.png',
								coach_name: '王教练',
								time: '17:00-17:20',
								status: 0 //0-未预约，1-已预约
							}]
						},
						{
							day: 26,
							weekDay: '一',
							list: [{
								lId: '0',
								course_title: '40人小班基础指导10人小班基...',
								cNum: 5,
								tNum: 10,
								label: ['基础课', '进阶课'],
								imgUrl: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/myIcon_h.png',
								coach_name: '王教练',
								time: '17:00-17:20',
								status: 0 //0-未预约，1-已预约
							}]
						},
						{
							day: 27,
							weekDay: '二',
							list: []
						}
					]
				},
				activeDay: 0,
				activeData: null,
				bannerList: [],
				longitude: null,
				latitude: null,
				shopId: 0,
				tabActive: 0
			}
		},
		onLoad(options) {},
		onShow() {

			const dd = new Date()
			const y = dd.getFullYear()
			const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
			const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
			this.currentDate = y + '-' + m + '-' + d
			this.activeData = this.shopDetail.leagueList[0]
			this.getStore()
		},
		methods: {
			//门店详情
			async getStore() {
				const param = {
					longitude: getApp().globalData.longitude,
					latitude: getApp().globalData.latitude,
					todayDate: this.currentDate,
					storeId: getApp().globalData.shopId ? getApp().globalData.shopId : 0
				}
				const {
					data: res
				} = await getStore(param)
				this.shopDetail = res.data
				this.activeData = this.shopDetail.leagueList[0]
			},

			//选择团课日期
			changeDay(i) {
				this.activeDay = i
				this.activeData = this.shopDetail.leagueList[i]
			},
			//切换门店
			changeShop() {
				uni.navigateTo({
					url: "/pages/shop/shopList"
				});
			},
			//私教详情
			toCoachDetail(cId) {
				uni.navigateTo({
					url: "/pages/course/coachDetail?cId=" + cId
				});
			},
			//团课详情
			toLeagueDetail(lId) {
				uni.navigateTo({
					url: "/pages/course/leagueDetail?lId=" + lId
				});
			},
			changeTab(num) {
				this.tabActive = num
			}
		}
	}
</script>

<style lang="less">
	.appointment {
		padding: 32rpx;
		background: #fff;

		.banner {
			width: 100%;
			height: 180rpx;
			border-radius: 16rpx;
			overflow: hidden;
			background: #777777;

			swiper {
				height: 100%;
			}

			image {
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		.storeName {
			display: flex;
			align-items: center;
			margin: 30rpx 0;

			image {
				width: 18rpx;
				height: 20rpx;
			}

			text {
				font-size: 24rpx;
				margin-left: 12rpx;
			}
		}

		.tabs {
			display: flex;

			.tab {
				width: 190rpx;
				height: 88rpx;
				background: #F5F5F5;
				border-radius: 16rpx 16rpx 0 0;
				font-size: 28rpx;
				color: #A4A4A4;
				text-align: center;
				line-height: 88rpx;
			}

			.tabActive {
				background: url(https://cloudcdn.noitom.com.cn/noitom2/billiard/tabs_bg.png);
				background-size: 100% 100%;
				font-size: 36rpx;
				font-weight: 600;
				color: #E60012;
			}
		}

		.coach {
			background: #fff;
			padding: 30rpx 0 32rpx 32rpx;
			border-radius: 16rpx;

			.cont {
				display: flex;
				margin-top: 32rpx;

				.coach_r_icon {
					width: 204rpx;
					height: 204rpx;
					border-radius: 8rpx;
					margin-right: 20rpx;
				}

				.right {
					.head {
						display: flex;
						align-items: center;
						.headPic {
							width: 105rpx;
							height: 34rpx;
							background: linear-gradient(158deg, #ECC797, #FEFAE7);
							border-radius: 8rpx;
							font-size: 20rpx;
							line-height: 34rpx;
							text-align: center;
						}

						.name {
							font-size: 32rpx;
							margin-left: 12rpx;
						}

					}

					.level {
						color: #A4A4A4;
						font-size: 24rpx;
						margin-top: 20rpx;
					}

					.price {
						font-size: 20rpx;
						color: #A4A4A4;
						margin-top: 72rpx;

						.symbol {
							color: #E60012;
						}

						.num {
							font-size: 36rpx;
							color: #E60012;
						}
					}
				}



			}
		}

		.league {
			background: #fff;
			border-radius: 16rpx;

			.weekBox {
				display: flex;
				justify-content: space-between;
				margin-top: 35rpx;
				line-height: 1;
				text-align: center;

				.cont {
					.weedDay {
						font-size: 24rpx;
						color: #A4A4A4;
					}

					.day {
						width: 48rpx;
						height: 48rpx;
						background: #ffffff;
						border-radius: 50%;
						font-size: 32rpx;
						font-weight: 500;
						line-height: 48rpx;
						margin-top: 9rpx;
					}
				}

				.active {
					.weedDay {
						color: #E60012;
					}

					.day {
						background: #E60012;
						color: #fff;
					}
				}
			}

			.activeData {
				line-height: 1;
				margin-top: 30rpx;
				.nodata{
					image{
						display: block;
						width: 179rpx;
						height: 126rpx;
						margin: 74rpx auto 32rpx;
					}
					.des{
						font-size: 24rpx;
						color: #A4A4A4;
						text-align: center;
					}
				}
				.cont {
					border-top: 2rpx solid #E2E2E2;
					padding-top: 35rpx;

					.top {
						display: flex;
						justify-content: space-between;

						.course_title {
							width: 441rpx;
							font-size: 32rpx;
							font-weight: 600;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-weight: bold;
						}

						.num {
							font-size: 24rpx;
							color: #A4A4A4;

							text {
								font-size: 32rpx;
								color: #E60012;
							}
						}
					}

					.label {
						font-size: 24rpx;
						color: #A4A4A4;
						margin-top: 17rpx;

						text {
							margin-right: 10rpx;
						}
					}

					.down {
						height: 58rpx;
						background: #F7F7F7;
						border-radius: 29rpx;
						display: flex;
						align-items: center;
						margin: 32rpx 0;

						.imgUrl {
							width: 46rpx;
							height: 46rpx;
							margin-left: 6rpx;
							margin-right: 17rpx;
						}

						.coach_name {
							font-size: 24rpx;
						}

						.line {
							display: inline-block;
							width: 2rpx;
							height: 18rpx;
							background: #BDBDBD;
							margin: 0 16rpx;
						}

						.time {
							font-size: 24rpx;
							color: #E60012;
						}

						button {
							width: 142rpx;
							height: 58rpx;
							background: linear-gradient(158deg, #E60012, #FF5B63);
							border-radius: 29rpx;
							margin-right: 0;
							font-size: 24rpx;
							line-height: 58rpx;
							color: #FFFFFF;
						}

						button[disabled]:not([type]) {
							background: #BBBBBB;
						}
					}
				}
			}
		}

		.footer_pic {
			display: block;
			width: 251rpx;
			height: 25rpx;
			margin: 32rpx auto 0;
		}
	}
</style>
